<template>
  <div>
    <div style="font-size: 24px"><span>{{ value.name }}(可选{{ value.selectCount }}): </span></div>
    <el-checkbox-group min=0 :max=value.selectCount v-model=data @change="handleChange">
      <div v-for="option in value.options" :key="option.id">
        <el-checkbox :label="option.name">{{ option.name }}</el-checkbox>
        <div style="margin-left: 50px" v-if="showItemSelect[option.name]">
          <div v-for="(item, index) in JSON.parse(option.extra).data " :key="index">
            <cus-select-item-detail :value="item" v-bind:model.sync='itemDetail[option.name][item.name]'></cus-select-item-detail>
          </div>
        </div>
      </div>
    </el-checkbox-group>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      required: false
    },
    model: {
      required: false
    }
  },
  data () {
    return {
      data: [],
      itemDetail: {},
      showItemSelect: []
    }
  },
  created () {
    this.value.options.forEach(i => {
      this.$set(this.itemDetail, i.name, {})
      JSON.parse(i.extra).data.forEach(ii => {
        this.$set(this.itemDetail[i.name], ii.name, [])
      })
    })
    // console.log(this.itemDetail)
  },
  watch: {
    data () {
      this.showItemSelect = {}
      this.data.forEach(i => {
        this.showItemSelect[i] = true
      })
      // console.log(this.showItemSelect)
    },
    itemDetail () {
      // console.log(this.itemDetail)
    }
  },
  methods: {
    handleChange (newValue) {
      const dd = []
      // console.log(newValue)
      for (const i in this.showItemSelect) {
        if (this.showItemSelect[i]) {
          this.itemDetail[i].name = i
          dd.push(this.itemDetail[i])
        }
      }
      // console.log(dd)
      // console.log(newValue)
      this.$emit('update:model', dd)
    }
  }
}
</script>

<style scoped>

</style>
